<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script type="text/javascript" src="../script/jquery-3.6.0.min.js"></script>
  <script type="text/javascript">

    function deleteUser($a) {
      var b = window.confirm("你确认要删除 " +$a.attr("id")+" 用户信息");
      if(!b){
        return false
      }
      $a.parent().parent().remove();
      return false;
    }

    $(function () {
      $("a").click(function () {
        return deleteUser($(this));
      })
      $("#addUser").click(function () {
        var $nameTD = $("<td/>");
        var NameVal = $("#name").val();
        $nameTD.append(NameVal)

        var $emailTD = $("<td/>");
        var emailVal = $("#email").val();
        $emailTD.append(emailVal)

        var $telTD = $("<td/>");
        var telVal = $("#tel").val();
        $telTD.append(telVal)

        var $deleteTD= $("<td/>");
        var $a = $("<a/>");
        $a.html("Delete")
        $a.attr("id",NameVal)
        $a.attr("href","deleteEmp?id="+ NameVal)

        $a.click(function () {
          return deleteUser($a);
        })
        $deleteTD.append($a)

        var $tr = $("<tr/>");
        $tr.append($nameTD)
        $tr.append($emailTD)
        $tr.append($telTD)
        $tr.append($deleteTD)

        $("#usertable tbody").append($tr)
      })
    })
  </script>
</head>
<body>
<center>
  <br><br>
  添加用户:<br><br>
  姓名: <input type="text" name="name" id="name"/>&nbsp;&nbsp;
  email: <input type="text" name="email" id="email"/>&nbsp;&nbsp;
  电话: <input type="text" name="tel" id="tel"/><br><br>
  <button id="addUser">提交</button>
  <br><br>
  <hr>
  <br><br>
  <table id="usertable" border="1" cellpadding="5" cellspacing=0>
    <tbody>
    <tr>
      <th>姓名</th>
      <th>email</th>
      <th>电话</th>
      <th>&nbsp;</th>
    </tr>
    <tr>
      <td>Tom</td>
      <td>tom@tom.com</td>
      <td>5000</td>
      <td><a id="Tom" href="deleteEmp?id=Tom">Delete</a></td>
    </tr>
    <tr>
      <td>Jerry</td>
      <td>jerry@sohu.com</td>
      <td>8000</td>
      <td><a id="Jerry" href="deleteEmp?id=Jerry">Delete</a></td>
    </tr>
    </tbody>
  </table>
</center>
</body>
</html>
